<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
</head>
<body>
<!--<div class="jumbotron">-->
    <!--<div class="container">-->
        <!--<h1 class="display-4">第一个 bootstrap 页面</h1>-->
        <!--<p class="lead">重置浏览器大小查看效果</p>-->
    <!--</div>-->
<!--</div>-->
<!--<div class="container">-->
    <!--<div class="row">-->
        <!--<div class="col-sm">-->
            <!--<h2 class="">第一列</h2>-->
            <!--<p>这是第一列</p>-->
        <!--</div>-->
        <!--<div class="col-sm">-->
            <!--<h2 class="">第二列</h2>-->
            <!--<p>第二列</p>-->
        <!--</div>-->
        <!--<div class="col-sm">-->
            <!--<h2 class="">第三列</h2>-->
            <!--<p>这+是第三列</p>-->
        <!--</div>-->
    <!--</div>.-->
<!--</div>-->
<!--<div class="container">-->
    <!--<div class="row">-->
        <!--<div class="col-md-4">天下三分 魏</div>-->
        <!--<div class="col-md-4">天下三分 蜀</div>-->
        <!--<div class="col-md-4">天下三分 吴</div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-1">1</div>-->
        <!--<div class="col-md-1">1</div>-->
        <!--<div class="col-md-1">1</div>-->
        <!--<div class="col-md-1">1</div>-->
        <!--<div class="col-md-1">1</div>-->
        <!--<div class="col-md-1">1</div>-->
        <!--<div class="col-md-1">1</div>-->
        <!--<div class="col-md-1">1</div>-->
        <!--<div class="col-md-1">1</div>-->
        <!--<div class="col-md-1">1</div>-->
        <!--<div class="col-md-1">1</div>-->
        <!--<div class="col-md-1">1</div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-4">4</div>-->
        <!--<div class="col-md-4">4</div>-->
        <!--<div class="col-md-4">4</div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-4">4</div>-->
        <!--<div class="col-md-8">8</div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-6">6</div>-->
        <!--<div class="col-md-6">6</div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-12">12</div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class=" col-6 col-md-4 col-lg-2">内容</div>-->
        <!--<div class=" col-6 col-md-4 col-lg-2">内容</div>-->
        <!--<div class=" col-6 col-md-4 col-lg-2">内容</div>-->
        <!--<div class=" col-6 col-md-4 col-lg-2">内容</div>-->
        <!--<div class=" col-6 col-md-4 col-lg-2">内容</div>-->
        <!--<div class=" col-6 col-md-4 col-lg-2">内容</div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-1">10</div>-->
        <!--<div class="col-md-1">10</div>-->
        <!--<div class="col-md-1">10</div>-->
        <!--<div class="col-md-1">10</div>-->
        <!--<div class="col-md-1">10</div>-->
        <!--<div class="col-md-1">10</div>-->
        <!--<div class="col-md-1">10</div>-->
        <!--<div class="col-md-1">10</div>-->
        <!--<div class="col-md-1">10</div>-->
        <!--<div class="col-md-1">10</div>-->
        <!--<div class="col-md-1">10</div>-->
        <!--<div class="col-md-1">10</div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-2">9</div>-->
        <!--<div class="col-md-2">9</div>-->
        <!--<div class="col-md-2">9</div>-->
        <!--<div class="col-md-2">9</div>-->
        <!--<div class="col-md-2">9</div>-->
        <!--<div class="col-md-2">9</div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-3">8</div>-->
        <!--<div class="col-md-3">8</div>-->
        <!--<div class="col-md-3">8</div>-->
        <!--<div class="col-md-3">8</div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-4">7</div>-->
        <!--<div class="col-md-4">7</div>-->
        <!--<div class="col-md-4">7</div>-->
    <!--</div>-->
    <!--<div class="row">-->
        <!--<div class="col-md-6">6</div>-->
        <!--<div class="col-md-6">6</div>-->
    <!--</div>-->

<!--</div>-->
<div class="container">
    <div class="row">
        <div class="col-6 col-md-3 col-sm-3">
            <div class="shop">商品</div>
        </div>
        <div class="col-6 col-md-3 col-sm-3">
            <div class="shop">商品</div>
        </div>
        <div class="col-6 col-md-3 col-sm-3">
            <div class="shop">商品</div>
        </div>
        <div class="col-6 col-md-3 col-sm-3">
            <div class="shop">商品</div>
        </div>
        <div class="col-6 col-md-3 col-sm-3">
            <div class="shop">商品</div>
        </div>
        <div class="col-6 col-md-3 col-sm-3">
            <div class="shop">商品</div>
        </div>
        <div class="col-6 col-md-3 col-sm-3">
            <div class="shop">商品</div>
        </div>
        <div class="col-6 col-md-3 col-sm-3">
            <div class="shop">商品</div>
        </div>
        <div class="col-6 col-md-3 col-sm-3">
            <div class="shop">商品</div>
        </div>
        <div class="col-6 col-md-3 col-sm-3">
            <div class="shop">商品</div>
        </div>
        <div class="col-6 col-md-3 col-sm-3">
            <div class="shop">商品</div>
        </div>
        <div class="col-6 col-md-3 col-sm-3">
            <div class="shop">商品</div>
        </div>
        <div class="col-md-4">
            <div class="shp">上课</div>
        </div>
        <div class="col-md-4">
            <div class="row">
                    <div class="col-6">
                        <div class="sp">上课</div>
                </div>
                <div class="col-6">
                    <div class="sp">上课</div>
                </div>
                <div class="col-6">
                    <div class="sp">上课</div>
                </div>
                <div class="col-6">
                    <div class="sp">上课</div>
                </div>
            </div>
        </div>
        <div class="col-md-4">

                <div class="shp">上课</div>

        </div>
    </div>
</div>
</body>
</html>